<template>
  <a-card :bordered="false" :style="{height: getRoleListHeight,overflow: 'auto'}">
    <a-row :gutter="30">
      <a-col :span="4">
        <a-directory-tree defaultExpandAll expandAction="dblclick" @select="onSelect" :load-data="onLoadData" :tree-data="treeData"/>
      </a-col>
      <a-col :span="20">
        <a-table
          ref="table"
          :pagination="false"
          :scroll="{ y: contentHight }"
          :columns="columns"
          :rowKey="(row, index) => row.FileDownLoadUrl"
          :dataSource="data"
          :loading="loading"
          :bordered="true"
          size="small"
        >
          <span slot="FileCreateTime" slot-scope="FileCreateTime">{{ timeFormat(FileCreateTime) }}</span>
          <span slot="FileLastWriteTime" slot-scope="FileLastWriteTime">{{ timeFormat(FileLastWriteTime) }}</span>
          <span slot="action" slot-scope="text, record">
            <template>
              <a :href="record.FileDownLoadUrl">下载</a>
            </template>
          </span>
        </a-table>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import moment from 'moment'

const columns = [
  { title: '文件名称', dataIndex: 'FileName', align: 'left', width: '20%' },
  { title: '文件类型', dataIndex: 'FileType', align: 'center' },
  { title: '文件大小', dataIndex: 'FileSize', align: 'center' },
  { title: '创建时间', dataIndex: 'FileCreateTime', align: 'center', scopedSlots: { customRender: 'FileCreateTime' } },
  {
    title: '最后修改时间',
    dataIndex: 'FileLastWriteTime',
    align: 'center',
    scopedSlots: { customRender: 'FileLastWriteTime' }
  },
  { title: '操作', dataIndex: 'action', align: 'left', width: '10%', scopedSlots: { customRender: 'action' } }
]
export default {
  name: 'ReportFile',
  data () {
    return {
      data: [],
      loading: false,
      contentHight: 570, // 表格高度
      columns,
      treeData: [
        { title: '报表文件目录', key: '/ReportFile' }
      ]
    }
  },
  computed: {
    // 文件区高度
    getRoleListHeight: function () {
      return (this.contentHight + 88) + 'px' // 自定义高度需求
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 页面渲染完成后的回调
      this.contentHight = this.getTableHeight(false)
    })
  },
  methods: {
    onLoadData (treeNode) {
      const _this = this
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve()
          return
        }
        setTimeout(() => {
          this.$http.post('/Base_Manage/Home/GetReportFileDirectoryInfo?folderPath=' + treeNode.eventKey).then(resJson => {
            if (resJson.Success) {
              if (resJson.Data && resJson.Data.length > 0) {
                treeNode.dataRef.children = resJson.Data
                _this.treeData = [..._this.treeData]
              }
              _this.GetDirectoryInfo(treeNode.eventKey)
            } else {
              _this.$message.error(resJson.Msg)
            }
          })
          resolve()
        }, 500)
      })
    },
    onSelect (selectedKeys, { node }) {
      this.GetDirectoryInfo(node.eventKey)
    },
    GetDirectoryInfo (path) {
      if (this.hasPerm('User.AllReportFile')) {
        this.$http.post('/Base_Manage/Home/GetReportFileInfos?folderPath=' + path).then(resJson => {
          this.loading = false
          this.data = resJson.Data
        })
      } else if (this.hasPerm('User.ReportFile')) {
        if (path === '/ReportFile') {
          this.data = null
        } else {
          this.$http.post('/Base_Manage/Home/GetReportFileInfos?folderPath=' + path).then(resJson => {
            this.loading = false
            this.data = resJson.Data
          })
        }
      } else {
        this.data = null
      }
    },
    // 时间处理
    timeFormat (val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>

</style>